<div id="app">
  <nz-layout class="layout">
    <nz-header class="header">
      <div class="wrap">
        <div class="left">
          <h1>Music</h1>
          <ul nz-menu nzTheme="dark" nzMode="horizontal">
            <li nz-menu-item>发现</li>
            <li nz-menu-item>歌单</li>
          </ul>
        </div>
        <!-- 右边 -->
        <div class="right">
          <div class="search">
            <nz-input-group [nzSuffix]="suffixIconSearch">
              <input type="text" nz-input placeholder="歌单/歌手/歌曲" />
            </nz-input-group>
            <!-- 搜索图标模板 -->
            <ng-template #suffixIconSearch>
              <i nz-icon nzType="search"></i>
            </ng-template>
          </div>
          <!-- 会员登陆面板 -->
          <div class="member">
            <div class="no-login">
              <ul nz-menu nzTheme="dark" nzMode="horizontal">
                <li nz-submenu>
                  <div title>
                    <span>登录</span>
                    <i nz-icon nzType="down" nzTheme="outline"></i>
                  </div>
                  <!-- 下拉面板 -->
                  <ul>
                    <li nz-menu-item>
                      <i nz-icon nzType='mobile' nzTheme="outline"></i>
                      手机登录
                    </li>
                    <li nz-menu-item>
                      <i nz-icon nzType='user-add' nzTheme="outline"></i>
                      注册
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </nz-header>
    <!-- 中间主要内容 -->
    <nz-content>
        <router-outlet></router-outlet>
    </nz-content>
    <!-- 底部 -->
    <nz-footer class="footer">
      Ant Design ©2019 Implement By Angular
    </nz-footer>
  </nz-layout>
</div>
